<template>
  <canvas ref="canvas" class="background-canvas"></canvas>
</template>

<script>
export default {
  name: 'BackgroundCanvas',
  data() {
    return {
      ctx: null,
      particles: [],
      animationFrame: null
    }
  },
  mounted() {
    this.initCanvas()
    this.animate()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame)
    }
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      this.ctx = canvas.getContext('2d')
      
      // 初始化粒子
      for (let i = 0; i < 50; i++) {
        this.particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 3 + 1,
          speedX: Math.random() * 2 - 1,
          speedY: Math.random() * 2 - 1,
          color: this.getRandomColor()
        })
      }
    },
    
    getRandomColor() {
      const colors = ['#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6']
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    animate() {
      const canvas = this.$refs.canvas
      this.ctx.clearRect(0, 0, canvas.width, canvas.height)
      
      // 绘制粒子
      this.particles.forEach(particle => {
        this.ctx.beginPath()
        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
        this.ctx.fillStyle = particle.color
        this.ctx.fill()
        
        // 更新位置
        particle.x += particle.speedX
        particle.y += particle.speedY
        
        // 边界检查
        if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1
        if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1
        
        // 连接临近粒子
        this.particles.forEach(otherParticle => {
          const dx = particle.x - otherParticle.x
          const dy = particle.y - otherParticle.y
          const distance = Math.sqrt(dx * dx + dy * dy)
          
          if (distance < 100) {
            this.ctx.beginPath()
            this.ctx.strokeStyle = `rgba(33, 150, 243, ${0.2 - distance/500})`
            this.ctx.lineWidth = 1
            this.ctx.moveTo(particle.x, particle.y)
            this.ctx.lineTo(otherParticle.x, otherParticle.y)
            this.ctx.stroke()
          }
        })
      })
      
      this.animationFrame = requestAnimationFrame(this.animate)
    },
    
    handleResize() {
      const canvas = this.$refs.canvas;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // 调整粒子数量
      const particleCount = Math.min(
        Math.floor((canvas.width * canvas.height) / 20000),
        50
      );
      
      // 重新初始化粒子
      this.particles = Array.from({ length: particleCount }, () => ({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.min(canvas.width * 0.003, 3) + 1,
        speedX: Math.random() * 2 - 1,
        speedY: Math.random() * 2 - 1,
        color: this.getRandomColor()
      }));
    }
  }
}
</script>

<style scoped>
.background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}
</style> 